<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="searchObj.provinceCode"
          placeholder="请选择省"
                   @change="provinceChanged"
                >
          <el-option v-for="item in provinceList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id"/>

        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
                    v-model="searchObj.cityCode"
                   placeholder="请选择市"
                   @change="cityChanged"
        >
          <el-option v-for="item in cityList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id"/>

        </el-select>
      </el-form-item>
      <el-form-item>
       <el-input v-model="searchObj.hosname" placeholder="医院名称"></el-input>
      </el-form-item>
      <button type="primary" icon="el-icon-search" @click="fetchData()">查询</button>
      <button type="default" icon="el-icon-search" @click="resetData()">清空</button>


    </el-form>


    <el-table v-loading="listLoading" :data="list"
              border fit highlight-current-row>
      <el-table-column label="序号" width="60" align="center">
          <template slot-scope="scope">
            {{ (page-1)*limit+scope.$index+1 }}
          </template>
      </el-table-column>
      <el-table-column label="医院logo" >
        <template slot-scope="scope">
          <img :src="'data:image/jpeg;base64,'+scope.row.logoData" width="80">
        </template>
      </el-table-column>
      <el-table-column label="医院名称" prop="hosname">
      </el-table-column>
      <el-table-column label="等级" prop="param.hostypeString" width="90">
      </el-table-column>
      <el-table-column label="详情地址" prop="param.fullAddress">
      </el-table-column>
      <el-table-column label="状态" width="80" >
        <template slot-scope="scope">
          {{ scope.row.status === 0 ? '未上线' : '已上线' }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime">
      </el-table-column>
      <el-table-column label="操作" width="230" align="center">
        <template slot-scope="scope">
          <router-link :to="'/hosp/show/'+scope.row.id">
            <el-button type="primary" size="mini">查看</el-button>
          </router-link>
          <router-link :to="'/hosp/schedule/'+scope.row.hoscode">
            <el-button type="primary" size="mini">排班</el-button>
          </router-link>


        <el-button v-if="scope.row.status == 1" type="primary" size="mini" @click="updateStatus(scope.row,0)">下线</el-button>
        <el-button v-if="scope.row.status == 0" type="danger" size="mini"  @click="updateStatus(scope.row,1)">上线</el-button>

        </template>
      </el-table-column>

    </el-table>



    <el-pagination
      @size-change="changeSize"
      @current-change="fetchData"
      :current-page="page"
      :page-sizes="[5,10,20,30,40,50,100]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      style="padding: 30px 0 ;text-align: center;"
      :total="total">
    </el-pagination>

  </div>
</template>



<script>
import hospApi from '@/api/hosp';

export default {
  data() {
    return {
      listLoading: true,//数据是否正在加载
      list:null,//banner列表
      total:0,//数据库中的总记录数
      page:1,//默认页码
      limit:10,//每页记录数
      searchObj:{},//查询表单对象
      provinceList:[],
      cityList:[],
      districtList:[]
    }
  },
  created() {
    this.fetchData()
    hospApi.findByDictCode('Province')
      .then(
        reponse=>{
          this.provinceList = reponse.data
        }
      )
  },
  methods: {
    //医院列表
    fetchData(page=1){
      this.page = page

      hospApi.getPageList(this.page,this.limit,this.searchObj)
        .then(
          reponse => {
            this.list = reponse.data.content
            this.total = reponse.data.totalElements

            //数据加载并绑定成功
            this.listLoading = false
          }
        )
    },
    changeSize(size){
      this.limit = size
      this.fetchData(1)
    },
    resetData(){
      this.searchObj = {}
      this.fetchData()
    },
    provinceChanged(){
      this.cityList = []
      this.searchObj.cityCode=null
      this.districtList = []
      this.searchObj.districtCode=null
      hospApi.findChildData(this.searchObj.provinceCode)
        .then(
          reponse =>{
            this.cityList = reponse.data
          }
        )
    },
    cityChanged(){
    },
    updateStatus(row,status){

      hospApi.updateStatus(row.id, status)
        .then(reponse =>{
            this.fetchData(this.page)
        })
    }
  }

}

</script>
